<template>
    <div>
       <headNav></headNav>
       <div class="head"></div>
       <div class="content">  
              <div class="dr_con">
                      <div class="dr_tit" v-if="type==1">文化达人</div>
                      <div class="dr_tit" v-if="type==2">科学达人</div>
                      <div class="dr_tit" v-if="type==3">运动达人</div>
                      <div class="dr_tit" v-if="type==4">劳动达人</div>
                      <div class="dr_tit" v-if="type==5">艺术达人</div>
                      <div class="dr_tit" v-if="type==0">其它达人</div>
                      <div class="drlist">
                        <div class="dr_list_item" v-for="(item,index) in dr" :key="index">
                            <div class="dr_list_item_left">
                                <img class="dr_per2" :src="'https://eduvideo.hangzhou.com.cn'+item.poster" alt="">
                            </div>
                            <div class="dr_list_item_right">
                                 <div class="dr_div_top">
                                       <div class="dr_div_top_t">姓名：<span class="dr_span">{{item.name}}</span></div>
                                       <div class="dr_div_top_t">年龄：<span class="dr_span">{{item.age}}</span></div>
                                       <div class="dr_div_top_t" v-if="item.sex=='1'">性别：<span class="dr_span">男</span></div>
                                       <div class="dr_div_top_t" v-if="item.sex=='0'">性别：<span class="dr_span">女</span></div>
                                 </div>
                                 <div class="dr_div_bottom">
                                   <div class="userdsc">个人说明：</div>
                                   <p class="userp">{{item.intro}}</p>
                                 </div>
                                 <div class="detail_div">
                                    <div class="detail" @click="drdetail(item.id)">详情</div>
                                 </div>
                            </div>
                        </div>
                      </div>
                      <div class="morediv">
                        <img @click="getDrList" class="more" src="./../static/images/home_more.png" alt="">
                      </div>
              </div>
        </div>
       <footCom></footCom>
       
    </div>
  </template>
  
  <script>
import footCom from '@/common/foot.vue';
import headNav from '@/common/headNav.vue';

export default {
    name: 'drList',
    components:{
     headNav,
     footCom,
  },
    data(){
      return{
         dr:[],
         type: 0,
         drpage:1,
      }
    },
    created(){
        this.type = this.$route.query.type
        this.getDrList()
    },
    methods:{
        getDrList(){
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_talents?type='+this.type+'&page='+this.drpage).then((res)=>{
                this.dr = this.dr.concat(res.data.data.data)
                this.drpage++
            })
        },
        drdetail(id){
            this.$router.push({path:'/drDetail',query:{id:id,type:this.type}})
        }
    }
  }
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .head{
    width: 100%;
    height: 464px;
    background: url('./../static/images/banner.jpg') no-repeat center top;
  }
  .content{
    width: 100%;
    height: 1400px;
    background: url('./../static/images/detail_con.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .dr_con{
    width: 1400px;
    height:auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .dr_tit{
    color: #fff;
    font-size: 36px;
  }
  .drlist{
    width: 100%;
    height: 1000px;
    overflow-y: scroll;
    margin-top: 70px;
  }
  .drlist::-webkit-scrollbar {
    width: 0 !important;
  }
  .dr_list_item{
    background-color: #e9e9e9;
    width:100%;
    height: 250px;
    border-radius: 15px;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-bottom: 30px;
}
.dr_per2{
    width: 231px;
    height: 171px;
    object-fit: cover;
    margin-left: 25px;
}
.dr_list_item_right{
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 171px;
    width:calc(100% - 280px);
    margin-right: 20px;
}
.dr_div_top{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
    width: 100%;
}
.dr_div_top_t{
    flex: 1;
    color: #404040;
    font-size: 18px;
    font-weight: bolder;
}
.dr_span{
    color: #3f3f3f;
    font-size: 16px;
    font-weight: normal;
}
.dr_div_bottom{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:flex-start;
    width: 100%;
    margin-top: 30px;
}
.userdsc{
    width: 100px;
    color: #404040;
    font-size: 18px;
    font-weight: bolder;
}
.userp{
    margin: 0;
    padding: 0;
    color: #3f3f3f;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: calc(100% - 100px);
    line-height: 25px;
    height: 90px;
}
.more{
    width: 312px;
    height: 84px;
    margin-top: 100px;
    cursor: pointer;
  }
  .morediv{
    width: 1400px;
    height: 84px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
  }
  .detail_div{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
  }
  .detail{
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 5px;
    color: #fff;
    background-color: #6275d3;
    border-radius: 15px;
    cursor: pointer;
  }
  </style>
  